<template>
    <div>
        <div style="display: flex;justify-content: space-between">
            <div>
                <el-input
                    placeholder="请输入员工姓名或奖惩原因进行搜索..."
                    prefix-icon="el-icon-search"
                    v-model="keyword"
                    style="width: 350px;margin-right: 10px"
                    @keydown.enter.native="initEmps"
                    clearable
                    :disabled="loading">
                </el-input>
                <el-button icon="el-icon-search" type="primary" @click="initEmps" :disabled="loading">搜索</el-button>
            </div>
            <div>
                <el-button type="primary" icon="el-icon-plus" @click="showAddEcView">添加奖惩</el-button>
            </div>
        </div>

        <div style="margin-top: 10px">
            <el-table
                :data="ecs"
                stripe
                border
                style="width: 100%"
                v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading">
                <el-table-column
                    type="selection"
                    width="40">
                </el-table-column>
                <el-table-column
                    prop="id"
                    label="ID"
                    width="50">
                </el-table-column>
                <el-table-column
                    label="员工姓名"
                    width="120">
                    <template slot-scope="scope">
                        <div>{{ scope.row.employee ? scope.row.employee.name : '无' }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="工号"
                    width="120">
                    <template slot-scope="scope">
                        <div>{{ scope.row.employee ? scope.row.employee.workID : '无' }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="ecdate"
                    label="奖惩日期"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="ecreason"
                    label="奖惩原因">
                </el-table-column>
                <el-table-column
                    prop="ecmoney"
                    label="奖惩金额"
                    width="120">
                </el-table-column>
                <el-table-column
                    label="奖惩类型"
                    width="120">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.ectype === 1" type="success">奖励</el-tag>
                        <el-tag v-else-if="scope.row.ectype === 2" type="danger">处罚</el-tag>
                        <el-tag v-else>未知</el-tag>
                    </template>
                </el-table-column>
              <el-table-column
                  prop="status"
                  label="审核状态">
              </el-table-column>
                <el-table-column
                    prop="remark"
                    show-overflow-tooltip
                    label="备注">
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    width="150">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status !== '审核通过'" size="mini" @click="showEditEcView(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteEc(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div style="display: flex;justify-content: flex-end;margin-top: 10px">
                <el-pagination
                    background
                    layout="sizes, prev, pager, next, jumper, ->, total"
                    :total="total"
                    :page-size="size"
                    :current-page.sync="page"
                    @current-change="initEmps"
                    @size-change="sizeChange">
                </el-pagination>
            </div>
        </div>

        <!-- 添加奖惩对话框 -->
        <el-dialog
            title="添加奖惩"
            :visible.sync="dialogVisible"
            width="50%">
            <div>
                <el-form :model="ec" :rules="rules" ref="ecForm" label-width="100px">
                    <el-form-item label="员工" prop="eid">
                        <el-select v-model="ec.eid" placeholder="请选择员工" style="width: 80%">
                            <el-option
                                v-for="emp in emps"
                                :key="emp.id"
                                :label="emp.name + '(' + emp.workID + ')'"
                                :value="emp.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="奖惩日期" prop="ecdate">
                        <el-date-picker
                            v-model="ec.ecdate"
                            type="date"
                            placeholder="选择日期"
                            style="width: 80%">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="奖惩原因" prop="ecreason">
                        <el-input v-model="ec.ecreason" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="奖惩金额" prop="ecmoney">
                        <el-input v-model="ec.ecmoney" style="width: 80%" placeholder="请输入奖惩金额">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="奖惩类型" prop="ectype">
                        <el-select v-model="ec.ectype" placeholder="请选择奖惩类型" style="width: 80%">
                            <el-option label="奖励" :value="1"></el-option>
                            <el-option label="处罚" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="ec.remark" :rows="3" style="width: 80%"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addEc">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑奖惩对话框 -->
        <el-dialog
            title="编辑奖惩"
            :visible.sync="updateDialogVisible"
            width="50%">
            <div>
                <el-form :model="updateEc" :rules="rules" ref="updateEcForm" label-width="100px">
                    <el-form-item label="员工" prop="eid">
                        <el-select v-model="updateEc.eid" placeholder="请选择员工" style="width: 80%">
                            <el-option
                                v-for="emp in emps"
                                :key="emp.id"
                                :label="emp.name + '(' + emp.workID + ')'"
                                :value="emp.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="奖惩日期" prop="ecdate">
                        <el-date-picker
                            v-model="updateEc.ecdate"
                            type="date"
                            placeholder="选择日期"
                            style="width: 80%">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="奖惩原因" prop="ecreason">
                        <el-input v-model="updateEc.ecreason" style="width: 80%"></el-input>
                    </el-form-item>
                    <el-form-item label="奖惩金额" prop="ecmoney">
                        <el-input v-model="updateEc.ecmoney" style="width: 80%" placeholder="请输入奖惩金额">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="奖惩类型" prop="ectype">
                        <el-select v-model="updateEc.ectype" placeholder="请选择奖惩类型" style="width: 80%">
                            <el-option label="奖励" :value="1"></el-option>
                            <el-option label="处罚" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="updateEc.remark" :rows="3" style="width: 80%"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doUpdateEc">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "PerEc",
        data() {
            return {
                loading: false,
                ecs: [],
                emps: [],
                total: 0,
                page: 1,
                size: 10,
                keyword: '',
                dialogVisible: false,
                updateDialogVisible: false,
                ec: {
                    eid: null,
                    ecdate: null,
                    ecreason: '',
                    ecmoney: 0,
                    ectype: 1,
                    remark: ''
                },
                updateEc: {
                    id: null,
                    eid: null,
                    ecdate: null,
                    ecreason: '',
                    ecmoney: 0,
                    ectype: 1,
                    remark: ''
                },
                rules: {
                    eid: [
                        {required: true, message: '请选择员工', trigger: 'change'}
                    ],
                    ecdate: [
                        {required: true, message: '请选择日期', trigger: 'change'}
                    ],
                    ecreason: [
                        {required: true, message: '请输入奖惩原因', trigger: 'blur'}
                    ],
                    ecmoney: [
                        {required: true, message: '请输入奖惩金额', trigger: 'blur'},
                        {pattern: /^-?\d+$/, message: '请输入整数金额', trigger: 'blur'}
                    ],
                    ectype: [
                        {required: true, message: '请选择奖惩类型', trigger: 'change'}
                    ]
                }
            }
        },
        mounted() {
            this.initEmps();
            this.initEmployees();
        },
        methods: {
            // 初始化奖惩记录
            initEmps() {
                this.loading = true;
                this.getRequest("/personnel/ec/?page=" + this.page + "&size=" + this.size + "&keyword=" + this.keyword).then(resp => {
                    this.loading = false;
                    if (resp) {
                        this.ecs = resp.data;
                        this.total = resp.total;
                    }
                });
            },

            // 初始化员工列表（用于选择）
            initEmployees() {
                this.getRequest("/employee/basic/").then(resp => {
                    if (resp) {
                        this.emps = resp.data;
                    }
                });
            },

            // 页面大小改变
            sizeChange(size) {
                this.size = size;
                this.page = 1;
                this.initEmps();
            },

            // 显示添加奖惩对话框
            showAddEcView() {
                this.dialogVisible = true;
                this.$nextTick(() => {
                    if (this.$refs.ecForm) {
                        this.$refs.ecForm.resetFields();
                    }
                });
            },

            // 显示编辑奖惩对话框
            showEditEcView(data) {
                this.updateDialogVisible = true;
                this.$nextTick(() => {
                    this.updateEc.id = data.id;
                    this.updateEc.eid = data.eid;
                    this.updateEc.ecdate = data.ecdate;
                    this.updateEc.ecreason = data.ecreason;
                    this.updateEc.ecmoney = data.ecmoney;
                    this.updateEc.ectype = data.ectype;
                    this.updateEc.remark = data.remark;
                });
            },

            // 添加奖惩
            addEc() {
                this.$refs.ecForm.validate(valid => {
                    if (valid) {
                        this.postRequest("/personnel/ec/", this.ec).then(resp => {
                            if (resp) {
                                this.dialogVisible = false;
                                this.initEmps();
                                this.$message.success("添加成功!");
                            }
                        });
                    }
                });
            },

            // 更新奖惩
            doUpdateEc() {
                this.$refs.updateEcForm.validate(valid => {
                    if (valid) {
                        this.putRequest("/personnel/ec/", this.updateEc).then(resp => {
                            if (resp) {
                                this.updateDialogVisible = false;
                                this.initEmps();
                                this.$message.success("更新成功!");
                            }
                        });
                    }
                });
            },

            // 删除奖惩
            deleteEc(data) {
                this.$confirm('此操作将删除该奖惩记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/personnel/ec/" + data.id).then(resp => {
                        if (resp) {
                            this.initEmps();
                            this.$message.success("删除成功!");
                        }
                    });
                }).catch(() => {
                    this.$message.info("已取消删除");
                });
            }
        }
    }
</script>

<style scoped>

</style>
